
.page0{
    width:100%;
    height:100%;
}
.page0 .bg{
    /*width:100%;*/
    position: absolute;
    height:100%;
    left:0;
    z-index:-1;
}

.page0 .head{
    width:20%;
    float: left;
    max-width:20%;
    height:11%;
    box-shadow:  0 0 30px 1px rgba(255,255,255,0.3);
    opacity:0.5;
}
.page0 .title1{
    position: absolute;
    top:20%;
    width:100%;
    left:0;
}
.page0 .title2{
    position: absolute;
    top:45%;
    width:50%;
    left:0;
}
.page0 .title3{
    position: absolute;
    top:60%;
    width:60%;
    left:20%;
}
.page0 .meteor{
    position: absolute;
    width:30%;
    left:0;
    top:0;
    opacity:0.8;
}
.page0 .meteor1{
    width:10%;
     top:30%;
    left:50%;
    animation-name: meteorMove;
    animation-duration: 7s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
 }
.page0 .meteor2{
    width:20%;
    top:10%;
    right:40%;

    animation-name: meteorMove;
    animation-duration: 4s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}
.page0 .meteor3{
    width:30%;
    top:40%;
    left:80%;

    animation-name: meteorMove;
    animation-duration: 6s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}
@keyframes meteorMove {
    0%{
        transform: translate(300%,-200%);
        opacity:1;
    }
    30%{opacity:0.4;}
    50%{
        opacity:1;}
    70%{opacity:0.4;}

    100%{
        opacity:1;
        transform: translate(-450%,300%);
    }
}

@keyframes BGmoveLeftAndRight {
    0%{transform:translateX(0) scale(1)}
    50%{transform:translateX(-60%) scale(1.5)}
    100%{transform:translateX(0) scale(1)}
}
.BGmoveLeftAndRight{
    animation-name:BGmoveLeftAndRight;
    animation-duration: 60s;
    animation-fill-mode: both;
    /*animation-timing-function: linear;*/
    animation-iteration-count: infinite;
}

@keyframes drop {
    0%{transform:scale(1.7);
        opacity:0;}
    50%{
        transform:scale(1);
        opacity:0.8;
    }
    100%{
        transform:scale(0.5);
        opacity:0;
    }
}
.drop{
    animation-name:drop;
    animation-duration: 3s;
    animation-fill-mode: both;
    animation-timing-function: linear;
}

/*.animation-delay500ms{animation-delay:700ms;}*/
/*.animation-delay500ms{animation-delay:1700ms;}*/

.animation-duration4s{
    animation-duration: 4s;
}